import React, { Component } from 'react'

export default class Model extends Component {
  state={
    foodtype:'',
    description:''
  }
  componentDidMount(){
    let obj = { ...this.props.changeObj }
    this.setState(obj)
  }

  handleChange =(item,event) =>{
      this.setState({ [item]: event.target.value})
  }

  render() {
    return (
      <div>
        <div className="modal fade in" id="modal-default" style={{ display: "block", paddingRight: 17 }}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button onClick={this.props.hideForm} type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span></button>
                <h4 className="modal-title">添加信息</h4>
              </div>
              <div className="modal-body">
                <form className="form-horizontal">
                  <div className="box-body">
                    <div className="form-group">
                      <label htmlFor="inputEmail3" className="col-sm-2 control-label">菜系类别</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange.bind(null,"foodtype")} 
                          value={this.state.foodtype}
                          type="text" className="form-control" id="inputEmail3" placeholder="请输入菜系类别" 
                        />
                      </div>
                    </div>
                    <div className="form-group">
                      <label htmlFor="inputPassword3" className="col-sm-2 control-label">菜品描述</label>
                      <div className="col-sm-10">
                        <textarea onChange={this.handleChange.bind(null, "description")} id="inputPassword3" 
                          value={this.state.description} className="form-control" rows="3" 
                          placeholder="请输入菜品描述"
                        ></textarea>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div className="modal-footer">
                <button onClick={this.props.hideForm} type="button" className="btn btn-default pull-left">关闭</button>
                <button onClick={this.props.saveData.bind(null,this.state)} type="button" className="btn btn-primary">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
